<template>
	<view>
		<Back />
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map id="map" style="width: 100vw; height: 100vh;" @markertap="labeltap" :show-location="true" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="20" :closeable="true">
			<view class="column" @tap="columeTap">
				<text>{{ tapColumn.name }}</text>
				<image :src="tapColumn.coverUrl" mode="aspectFill"></image>
			</view>
		</u-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [],
			show: false,
			tapColumn: {},
			courseList: []
		}
	},
	onLoad(option) {
		
		if (option && option.item) {
			const detailData = JSON.parse(decodeURIComponent(option.item))
			this.latitude = detailData.latitude
			this.longitude = detailData.longitude
			this.title = detailData.title
			this.covers = [
				{
					latitude: detailData.latitude,
					longitude: detailData.longitude,
					iconPath: '../../static/icon/address.png'
				}
			]
		} else {
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					uni.createMapContext('map', this)
					this.latitude = res.latitude
					this.longitude = res.longitude
				}
			})
			this.loadMapData()
		}
	},
	methods: {
		loadMapData: async function() {
			//用户deviceUuid没有获取则轮训获取 直到获取成功
			if (!this.deviceUuid) {
				const timer = setTimeout(() => {
					this.loadMapData()
				}, 300)
				this.$once('hook:beforeDestory', function() {
					clearTimeout(timer)
				})
				return
			}
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadCourseList, { deviceUuid: this.deviceUuid }))
			this.courseList = data.courses
			data.courses.map((item, index) => {
				const option = {
					id: item.id,
					latitude: item.location.latitude,
					longitude: item.location.longitude,
					iconPath: '../../static/icon/address.png',
					label: {
						content: item.name,
						fontSize: 15,
						color: '#FFFFFF',
						bgColor: '#FF7002',
						borderRadius: 30,
						padding: 5
					}
				}
				this.covers.push(option)
			})
		},
		labeltap: function(e) {
			this.tapColumn = this.courseList.filter(item => {
				return item.id === e.markerId
			})[0]
			this.show = true
		},
		columeTap: function() {
			this.$Router.push({ name: 'courseDetail', query: { item: JSON.stringify(this.tapColumn) } })
		}
	}
}
</script>

<style scoped lang="stylus">
.column
	display flex
	flex-direction column
	width 700rpx
	margin 0 auto
	text
		font-size 30rpx
		line-height 3.5
	image
		width 700rpx
		height 400rpx
		margin-bottom 50rpx
		border-radius 30rpx
</style>
